<template>
  <div>
    <div
      class="SignIn"
      @mouseenter="$store.state.signIn ? info_show() : false"
      @mouseleave="$store.state.signIn ? info_show() : false"
    >
      <a
        href="javascript:;"
        @mousedown="open"
        class="c-sign"
        v-if="!$store.state.signIn"
        >登录</a
      >
      <div class="sign" v-if="$store.state.signIn">
        <img :src="$store.state.data.profile.avatarUrl + '?param=30y30'" />
        <i class="m-topmsg m-po">6</i>
      </div>
      <!--  -->
      <div class="m-tlist" v-show="info_flag">
        <ul>
          <li>
            <a href="javascirpt:;" class="itm-1">
              <i class="icn icn-hm"></i>
              <em>我的主页</em>
            </a>
            <!-- <router-link :to="{
                  path:'/user/home',
                  query:{
                    id:12
                  }
                }"></router-link> -->
          </li>
          <li>
            <a href="javascirpt:;" class="itm-1">
              <i class="icn icn-msg"></i>
              <em>我的消息</em>
              <!-- <span class="m-topmsg m-po1">6</span> -->
            </a>
          </li>
          <li>
            <a href="javascirpt:;" class="itm-1">
              <i class="icn icn-lv"></i>
              <em>我的等级</em>
            </a>
          </li>
          <li>
            <a href="javascirpt:;" class="itm-1">
              <i class="icn icn-mbr"></i>
              <em>VIP会员</em>
            </a>
          </li>
        </ul>
        <!-- 个人设置与实名认证 -->
        <ul>
          <li>
            <a href="javascript:;">
              <i class="icn icn-st"></i>
              <em>个人设置</em>
            </a>
          </li>
          <li>
            <a href="javascript:;">
              <i class="icn icn-verity"></i>
              <em>实名认证</em>
            </a>
          </li>
        </ul>
        <!-- 退出登录 -->
        <ul>
          <li>
            <a href="javascript:;" @mousedown="sign_out">
              <i class="icn icn-ex"></i>
              <em>退出</em>
            </a>
          </li>
        </ul>
        <i class="arr"></i>
      </div>
    </div>
    <a href="javascript:;" class="m-topvd"> 创作者中心 </a>
    <div class="m-srcbg">
      <div class="srcbg">
        <span class="parent">
          <input
            type="text"
            class="musicinput"
            @keydown.enter="searchSong_enter"
             ref="input"
            id="in"
            @focus="show_flag"
            @blur="show_flag1"
            v-model="txt"
          />
          <label for="in" class="lab" v-if="flag">音乐/视频/电台/用户</label>
        </span>
      </div>
      <div class="u-lstlay" :style="search_flag">
        <div>
          <p class="note">
            <a href="javascript:;" class="s-fc3">搜“{{ txt }}” 相关用户</a> >
          </p>
          <div>
            <div class="clearfix" v-if="songs.length">
              <h3 class="hd">
                <i class="icn"></i>
                <em class="f-f1">单曲</em>
              </h3>
              <ul class="clearfix">
                <li v-for="(el, index) in songs" :key="index">
                  <router-link  
                    :to="{
                      path: '/song',
                      query: {
                        id: datas.songs[index].id,
                      },
                    }"
                    class="overtext"
                    v-html="el" 
                    ></router-link>
                </li>
              </ul>
            </div>
            <div class="clearfix" v-if="artists.length">
              <h3 class="hd">
                <i class="icn1 p-1"></i>
                <em class="s-fc7">歌手</em>
              </h3>
              <ul class="clearfix odd">
                <li v-for="(el, index) in artists" :key="index">
                  <a href="javascript:;" class="overtext" v-html="el"></a>

                </li>
              </ul>
            </div>
            <div class="clearfix" v-if="albums.length">
              <h3 class="hd">
                <i class="icn1 p-2"></i>
                <em class="s-fc7">专辑</em>
              </h3>
              <ul class="clearfix">
                <li v-for="(el, index) in albums" :key="index">
                  <!-- <a href="javascript:;" class="overtext" v-html="el"></a> -->
                  <router-link  
                    :to="{
                      path: '/album',
                      query: {
                        id: datas.albums[index].id,
                      },
                    }"
                    class="overtext"
                    v-html="el" 
                    ></router-link>
                </li>
                   
              </ul>
            </div>
            <div class="clearfix" v-if="playlists.length">
              <h3 class="hd">
                <i class="icn1 p-3"></i>
                <em class="s-fc7">歌单</em>
              </h3>
              <ul class="clearfix odd">
                <li v-for="(el, index) in playlists" :key="index">
                  <!-- <a href="javascript:;" class="overtext" v-html="el"></a> -->
                  <router-link  
                    :to="{
                      path: '/playlist',
                      query: {
                        id: datas.playlists[index].id,
                      },
                    }"
                    class="overtext"
                    v-html="el" 
                    ></router-link>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "MusicHeadInput",
  data() {
    return {
      searchSong: "",
      info_flag: false,
      flag: true,
      result: {
        albums: {
          name: ["啊真的"],
        },
      },
      txt: "",

      albums: [],
      artists: [],
      playlists: [],
      songs: [],
      search_flag: {
        display: "none",
      },
      datas: "",
      flag_s:true
    };
  },

  methods: {
    
    searchSong_enter() {
     
       this.$refs.input.blur();
      this.$router.replace("/search");
      this.$router.push({
        path:'/search',
        query:{
           s:this.txt,
           type:'1'
        }
      })
    },
    open() {
      this.$bus.$emit("sign_state", true);
    },
    sign_out() {
      axios.get("http://localhost:8080/api/logout").then(
        () => {
          this.$router.go(0);
        },
        (err) => {
          console.log(err);
        }
      );
    },
    info_show() {
      this.info_flag = !this.info_flag;
    },
    show_flag() {
      if (this.txt == "") {
        this.flag = false;
        
      }
     
     
        if (this.txt.replace(/ +/g, "").length) {
        axios
          .get("http://localhost:8080/api/search/suggest", {
            params: {
              keywords: this.txt,
            },
          })
          .then((response) => {
            if (response.data.result.order) {
              
              this.search_flag.display = "block";
              this.albums = [];
              this.songs = [];
              this.playlists = [];
              this.artists = [];
              this.datas = response.data.result;
             
              let re = new RegExp(this.txt, "g");
              if (response.data.result.order.indexOf("albums") != -1) {
                response.data.result.albums.forEach((el) => {
                  this.albums.push(
                    el.name.replace(
                      re,
                      '<span class="s-fc7">' + this.txt + "</span>"
                    ) +
                      "-" +
                      el.artist.name
                  );
                });
              }

              if (response.data.result.order.indexOf("playlists") != -1) {
                response.data.result.playlists.forEach((el) => {
                  this.playlists.push(
                    el.name.replace(
                      re,
                      '<span class="s-fc7">' + this.txt + "</span>"
                    )
                  );
                });
              }

              if (response.data.result.order.indexOf("artists") != -1) {
                response.data.result.artists.forEach((el) => {
                  this.artists.push(
                    el.name.replace(
                      re,
                      '<span class="s-fc7">' + this.txt + "</span>"
                    )
                  );
                });
              }
              if (response.data.result.order.indexOf("songs") != -1) {
                response.data.result.songs.forEach((el) => {
                  this.songs.push(
                    el.name.replace(
                      re,
                      '<span class="s-fc7">' + this.txt + "</span>"
                    ) +
                      "-" +
                      el.artists[0].name
                  );
                });
              }
            } else {
              this.search_flag.display = "none";
              
            }
          });
      } else {
        this.search_flag.display = "none";
        
      }
      

    },
   show_flag1(){
    
     if (this.txt == "") {
        this.flag = true;
     }
    
  
      
   
       setTimeout( () => {
         this.search_flag.display = "none";
       },130)
           
  

   
      
   
   } 
  },
  watch: {
 
    txt(value) {
    
      if (value.replace(/ +/g, "").length) {
        axios
          .get("http://localhost:8080/api/search/suggest", {
            params: {
              keywords: value,
            },
          })
          .then((response) => {
        
            if (response.data.result.order) {
              
              this.search_flag.display = "block";
              this.albums = [];
              this.songs = [];
              this.playlists = [];
              this.artists = [];
              this.datas = response.data.result;
            
              let re = new RegExp(value, "g");
              if (response.data.result.order.indexOf("albums") != -1) {
                response.data.result.albums.forEach((el) => {
                  this.albums.push(
                    el.name.replace(
                      re,
                      '<span class="s-fc7">' + value + "</span>"
                    ) +
                      "-" +
                      el.artist.name
                  );
                });
              }

              if (response.data.result.order.indexOf("playlists") != -1) {
                response.data.result.playlists.forEach((el) => {
                  this.playlists.push(
                    el.name.replace(
                      re,
                      '<span class="s-fc7">' + value + "</span>"
                    )
                  );
                });
              }

              if (response.data.result.order.indexOf("artists") != -1) {
                response.data.result.artists.forEach((el) => {
                  this.artists.push(
                    el.name.replace(
                      re,
                      '<span class="s-fc7">' + value + "</span>"
                    )
                  );
                });
              }
              if (response.data.result.order.indexOf("songs") != -1) {
                response.data.result.songs.forEach((el) => {
                  this.songs.push(
                    el.name.replace(
                      re,
                      '<span class="s-fc7">' + value + "</span>"
                    ) +
                      "-" +
                      el.artists[0].name
                  );
                });
              }
            } else {
              this.search_flag.display = "none";
              
            }
          });
      } else {
        this.search_flag.display = "none";
        
      }
    },
  },
};
</script>

<style scoped lang='less'>
.m-srcbg {
  margin: 19px 0 0;
  position: relative;
  float: right;
  width: 158px;
  height: 32px;
  background-color: #fff;
  border-radius: 32px;
  .u-lstlay {
    position: absolute;
    top: 40px;
    z-index: 100;
    left: 0;
    box-sizing: border-box;
    border: 1px solid #bebebe;
    border-radius: 4px;
    background: #fff;
    box-shadow: 0 4px 7px #555;
    text-shadow: 0 1px 0 rgb(255 255 255 / 90%);
    width: 240px;
    text-align: left;
  }
  .hd {
    float: left;
    width: 52px;
    margin-right: -100px;
    padding: 10px 0 0 10px;
    border-right: 1px solid #e2e2e2;
    line-height: 17px;
    font-weight: normal;
    font-size: 12px;
    .icn {
      float: left;
      margin: 2px 4px 0 0;
      width: 14px;
      height: 15px;
      background: url(../images/icon.png) no-repeat -35px -300px;
      vertical-align: middle;
      overflow: hidden;
    }
    .p-1 {
      background-position: -50px -300px;
    }
    .p-2 {
      background-position: -35px -320px;
    }
    .p-3 {
      background-position: -50px -320px;
    }
  }
  ul {
    margin-left: 62px;
    margin-top: -1px;
    padding: 6px 0 5px;
    border-top: 1px solid #e2e2e2;
    border-left: 1px solid #e2e2e2;
  }
  li {
    width: 100%;
    float: left;
    &:hover {
      background: #e3e5e7;
    }
    a {
      display: block;
      width: 100%;
      text-indent: 12px;
      line-height: 24px;
      text-decoration: none;
    }
  }
  .odd {
    background: #f9f8f8;
  }
}
.icn1 {
  float: left;
  margin: 2px 4px 0 0;
  width: 14px;
  height: 15px;
  background: url(../images/icon.png) no-repeat 0 9999px;
  vertical-align: middle;
  overflow: hidden;
}
.srcbg {
  position: absolute;
  top: 0;
  width: 158px;
  height: 32px;
  background: url(../images/topbar.png) no-repeat 0 -99px;
}
.parent {
  display: block;
  position: relative;
  margin: 8px 0 0 30px;
}
.musicinput {
  width: 95%;
  margin: 0;
  padding: 0;
  line-height: 16px;
  cursor: text;
}

.lab {
  position: absolute;
  top: 0;
  left: 0;
  color: #9b9b9b;
  cursor: text;
}
.SignIn {
  float: right;
  position: relative;
  height: 45px;
  margin: 19px 0 0 20px;
  padding: 0 22px 0 0;
  color: #787878;
  a {
    &:hover {
      text-decoration: underline;
      color: inherit;
    }
  }
}
.m-topvd {
  float: right;
  margin: 19px 0 0 12px;
  width: 90px;
  height: 32px;
  line-height: 32px;
  box-sizing: border-box;

  color: #ccc;
  border-radius: 20px;
  border: 1px solid #4f4f4f;
  text-align: center;
}
.sign {
  position: relative;
  width: 30px;
  height: 30px;
  img {
    border-radius: 30px;
    height: 30px;
    width: 30px;
  }
}
.c-sign {
  display: block;
  margin-top: 7px;
  width: 28px;
  color: #787878;
}
.m-topmsg {
  display: inline-block;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  background: #c20c0c;
  border: 1px solid #242424;
  font-size: 12px;
  white-space: nowrap;
  color: #fff;
  border-radius: 18px;
  box-sizing: border-box;
  line-height: 16px;
}
.m-po {
  position: absolute;
  top: -5px;
  left: 20px;
}
.m-tlist {
  position: absolute;
  top: 38px;
  right: -43px;
  width: 158px;
  background: #2b2b2b;
  border: 1px solid #202020;
  box-shadow: 0 8px 24px 0 rgb(0 0 0 / 50%);
  border-radius: 4px;
  z-index: 1;
  li {
    float: left;
    box-sizing: border-box;
    width: 100%;
  }
  a {
    display: block;
    overflow: hidden;
    position: relative;
    padding-left: 24px;
    color: #ccc;
    height: 34px;
    line-height: 34px;

    &:hover {
      background: #353535;
      text-decoration: none;
      color: #fff;
    }
  }
  .icn {
    float: left;
    width: 18px;
    height: 18px;
    margin: 7px 10px 0 0;
  }
  .icn-hm {
    background: url(../images/toplist.png) no-repeat 0 -80px;
  }
  em {
    display: inline-block;
    width: 100px;
    cursor: pointer;
    font-style: normal;
    text-align: left;
  }
  .icn-msg {
    background: url(../images/toplist.png) no-repeat -20px -120px;
  }
  .icn-lv {
    background: url(../images/toplist.png) no-repeat 0 -100px;
  }
  .icn-mbr {
    background: url(../images/toplist.png) no-repeat 0 -221px;
  }
  .icn-verity {
    background: url(../images/toplist.png) no-repeat -20px -142px;
  }
  .icn-st {
    background: url(../images/toplist.png) no-repeat 0 -140px;
  }
  .icn-ex {
    background: url(../images/toplist.png) no-repeat 0 -200px;
  }
  .m-po1 {
    position: absolute;
    top: 7px;
    left: 110px;
  }
}
.arr {
  position: absolute;
  margin-left: -8px;
  top: -8px;
  left: 50%;
  width: 14px;
  height: 8px;
  background: url(../images/toplist.png) no-repeat -20px 0;
}
.note {
  height: 17px;
  padding: 11px 10px;
  border-bottom: 1px solid #e2e2e2;
}
</style>